import React from 'react';
import { Modal, Form, Input } from 'antd';
// import { Link } from "dva/router";
import { connect } from 'dva';

@connect()
class EditPage extends React.Component {
  handleSubmit = () => {
    const { editOk } = this.props;
    this.props.form.validateFields((errors, values) => {
      if (errors) {
        return;
      }
      editOk(values);
    });
  };

  render() {
    const { visible, editCancel, editData, editLoading } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      }
    };

    return (
      <Modal
        title={editData ? '编辑' : '新增'}
        visible={visible}
        confirmLoading={editLoading}
        onOk={() => this.handleSubmit()}
        onCancel={() => editCancel()}>
        <Form {...formItemLayout}>
          <Form.Item label='群名称'>
            {getFieldDecorator('name', {
              initialValue: editData && editData.name,
              rules: [{ required: true, message: '请输入群名称' }]
            })(<Input placeholder='请输入群名称' />)}
          </Form.Item>
          <Form.Item label='phone'>
            {getFieldDecorator('phone', {
              initialValue: editData && editData.phone,
              rules: [{ required: true, message: '请输入群主电话' }]
            })(<Input placeholder='请输入群主电话' />)}
          </Form.Item>
          <Form.Item label='corpId'>
            {getFieldDecorator('corpId', {
              initialValue: editData && editData.corpId,
              rules: [{ required: true, message: '请输入corpId' }]
            })(<Input placeholder='请输入corpId' />)}
          </Form.Item>
          <Form.Item label='corpSecret'>
            {getFieldDecorator('corpSecret', {
              initialValue: editData && editData.corpSecret,
              rules: [{ required: true, message: '请输入corpSecret' }]
            })(<Input placeholder='请输入corpSecret' />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(EditPage);
